<template>
  <div id="message-send-box-wrapper">
    <!--    提供选择框 , 来进行选择 发送图片消息 , 还是文件消息 , 等等-->
    <div class="send-header-bar">
      <!-- 弹出框，展示emoji表情，供你选择 -->
      <el-popover placement="top" width="400" trigger="click">
        <div class="emojis">
          <!-- 选择的是表情的名字 -->
          <div
            v-for="item in emojiName"
            :key="item"
            class="emoji"
            :title="item"
            @click="chooseEmoji(item)"
          >
            <img
              :src="emojiUrl + emojiMap[item]"
              style="width: 30px; height: 30px"
            >
          </div>
        </div>
        <!-- 点击发表情按钮，弹出emoji表情列表 -->
        <svg-icon
          title="发表情"
          slot="reference"
          class="svg" icon-class="sendEmoji"
        />
      </el-popover>

      <svg-icon
        title="发图片"
        class="svg"
        icon-class="sendImage"
        @click="handleSendImageClick"
      />
      <svg-icon
        title="发视频"
        class="svg"
        icon-class="sendVideo"
        @click="handleSendVideoClick"
      />
      <svg-icon
        title="发文件"
        class="svg"
        icon-class="sendFile"
        @click="handleSendFileClick"
      />
      <!--       ======================================================  -->
      <!-- 选择图片 -->
      <input
        id="imagePicker"
        ref="imagePicker"
        type="file"
        accept=".jpg, .jpeg, .png, .gif"
        style="display: none"
        @change="sendImage"
      >
      <!-- 选择文件 -->
      <input
        id="filePicker"
        ref="filePicker"
        type="file"
        style="display: none"
        @change="sendFile"
      >
      <!-- 选择视频 -->
      <input
        id="videoPicker"
        ref="videoPicker"
        type="file"
        style="display: none"
        accept=".mp4"
        @change="sendVideo"
      >
      <!--       =========================================================== -->
      <!--    输入框 , 来输入要进行发送的内容 , 来进行发送消息-->
      <div class="bottom">
        <!-- 输入框 -->
        <textarea
          ref="text-input"
          v-model="messageContent"
          rows="5"
          resize="false"
          class="text-input"
          @focus="focus = true"
          @blur="focus = false"
          @keydown.enter.exact.prevent="handleEnter"
          @keyup.ctrl.enter.prevent.exact="handleLine"
        />
        <!--      发送消息按钮-->
        <div class="btn-send" title="按Enter发送消息，Ctrl+Enter换行" @click="handleEnter">发 送</div>
      </div>
    </div>
  </div>
</template>
<script>
// <!--导入表情-->
import {
  Form,
  FormItem,
  Input,
  Dialog,
  Popover,
  RadioGroup,
  Radio,
  Tooltip,
  Rate,
  Message
} from 'element-ui'
import {emojiMap, emojiName, emojiUrl} from "@/views/WeChat/chatCoze/emojiMap";
import {mapState} from "vuex";

export default {
  name: "MessageSendBox",
  components: {
    ElInput: Input,
    ElForm: Form,
    ElFormItem: FormItem,
    ElDialog: Dialog,
    ElPopover: Popover,
    ElRadioGroup: RadioGroup,
    ElRadio: Radio,
    ElTooltip: Tooltip,
    ElRate: Rate
  },
  data() {
    return {
      //要发送的消息内容
      messageContent: '',
      //表情的url地址 , 表情的名字
      emojiMap: emojiMap,
      emojiName: emojiName,
      emojiUrl: emojiUrl,
      focus: false, // 输入框是否获取焦点
    }
  },
  //函数
  methods: {
    //  选择表情
    chooseEmoji(item) {
      this.messageContent += item
    },
    // 点击发送图片
    handleSendImageClick() {
      this.$refs.imagePicker.click()
    },
    // 点击发送文件
    handleSendFileClick() {
      this.$refs.filePicker.click()
    },
    // 点击发送视频
    handleSendVideoClick() {
      this.$refs.videoPicker.click()
    },
    //  输入框  , 指定一个换行
    handleLine() {
      this.messageContent += '\n'
    },
    //输入框 , 指定一个回车事件 , 来指定发送消息
    handleEnter() {
      //开始发送文本消息
      console.log("开始发送消息");
      if (this.messageContent == '' || this.messageContent.trim().length === 0) {
        Message({showClose: true, message: '警告哦，不能发送空的消息', type: 'warning'});
        return;
      }
      //调用发送消息的接口 ,来进行发送消息(要进行发送的消息)
      this.sendTextMessage(this.messageContent)
    },
    //  发送文本消息的函数 , 来进行发送文本消息
    sendTextMessage(context) {
      //  创建一个消息对象
      const message = this.tim.createTextMessage({
        //  消息的接收方的id
        to: this.MessageTo(),
        //  消息的类型 , 指定 端到端的类型(当前会话的类型)
        conversationType: this.currentConversation.type,
        //  指定消息的发送的内容
        payload: {text: context}
      })
      console.log("消息创建成功" + message);
      //  将消息 , 插入到当前的会话列表中
      this.$store.commit('timMessage/pushCurrentMessageList', message)
      this.$bus.$emit('scroll-bottom')
      //  开始发送消息
      this.tim.sendMessage(message).catch((error) => {
        //  消息发送失败
        this.$store.commit('timMessage/showMessage', {
          type: 'error',
          message: error.message
        })
      })
      //  消息发送成功 , 则清空输入框
      this.messageContent = '';
    },

    //  发送图片消息 , 来进行发送图片
    sendImage() {
      //  创建一个图片 消息对象 , 来发送图片
      const message = this.tim.createImageMessage({
        to: this.MessageTo(),                // 消息的接收方
        conversationType: this.currentConversation.type, // 消息的类型 , 是端到端的消息
        //消息的 内容
        payload: {
          file: document.getElementById('imagePicker') // 或者用event.target
        },
        //手动增加一个响应式的属性
        onProgress: (percent) => {
          // this.$set(message, 'progress', percent) // 手动给message 实例加个响应式属性: progress
          console.log("进度:" + percent);
        }
      })
      console.log("消息创建成功");
      // 将消息, 存放到当前消息列表里面
      this.$store.commit('timMessage/pushCurrentMessageList', message)
      this.$bus.$emit('image-loaded')
      //  开始发送消息
      this.tim.sendMessage(message)
        .then(() => {
          //  重置图片选择器
          this.$store.commit('timMessage/showMessage', {
            message: "图片发送成功",
            type: 'success'
          })
        })
        .catch(err => {
          this.$store.commit('timMessage/showMessage', {
            message: err.message,
            type: 'error'
          })
        })
    },
    //发送视频消息的函数 , 来进行发送视频消息
    sendVideo() {
      //  创建一个视频消息 , 来进行发送消息
      const message = this.tim.createVideoMessage({
        to: this.MessageTo(),
        conversationType: this.currentConversation.type, //消息的类型
        //  消息的内容
        payload: {
          file: document.getElementById('videoPicker')
        },
        //  视频上传进度的百分比
        onProgress: (event) => {
          this.$set(message, 'progress', event) // 手动给message 实例加个响应式属性: progress
        }
      })
      console.log("视频消息对象 , 创建成功");
      //  把消息 , 保存到当前的会话列表里面
      this.$store.commit('timMessage/pushCurrentMessageList', message)
      this.$bus.$emit('scroll-bottom')
      //  开始发送消息
      this.tim.sendMessage(message)
        .then(() => {
          this.$store.commit('timMessage/showMessage', {
            message: "视频发送成功",
            type: 'success'
          })
        }).catch(err => {
        this.$store.commit('timMessage/showMessage', {
          message: err.message,
          type: 'error'
        })
      })
    },
    //发送文件消息
    sendFile() {
      const message = this.tim.createFileMessage({
        to: this.MessageTo(),
        conversationType: this.currentConversation.type,
        payload: {
          file: document.getElementById('filePicker') // 或者用event.target
        },
        onProgress: (percent) => {
          this.$set(message, 'progress', percent) // 手动给message 实例加个响应式属性: progress
        }
      })
      console.log('创建文件消息:')
      this.$store.commit('timMessage/pushCurrentMessageList', message)
      this.$bus.$emit('image-loaded')

      this.tim.sendMessage(message)
        .then(() => {
          this.$store.commit('timMessage/showMessage', {
            message: "文件发送成功",
            type: 'success'
          })
        }).catch(err => {
        this.$store.commit('timMessage/showMessage', {
          message: err.message,
          type: 'error'
        })
      })

    },
    //获取 , 接受方 , 的id
    MessageTo() {
      //  开始发送消息(获取消息的接受方的id)
      return this.currentConversation.conversationID.replace('C2C', '')
    }
  },
  computed: {
    ...mapState({
      //当前操作的会话
      currentConversation: (state) => state.timMessage.currentConversation,
    }),
  }
}
</script>

<style scoped>

#message-send-box-wrapper {
  box-sizing: border-box;
  overflow: hidden;
  padding: 3px 20px 20px 20px;
}

/*显示导航栏*/
.send-header-bar {
  box-sizing: border-box;
  padding: 3px 0 0 0;
}

/*显示表情*/
.emojis {
  height: 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}

/*选择 图片的的点击事件*/
.svg {
  cursor: pointer;
  font-size: 20px;
  fill: gray;
  margin: 0 12px 0 0;
}

.svg:hover {
  fill: #0d3de8;
}

.bottom {
  padding-top: 10px;
  position: relative;
}

/*指定文本框的样式*/
.text-input {
  /*指定文字的大小*/
  font-size: 16px;
  /*指定*/
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
}

.btn-send {
  cursor: pointer;
  position: absolute;
  color: #79b2ed;
  font-size: 20px;
  right: 0;
  bottom: -5px;
  padding: 6px 6px 4px 4px;
  border-radius: 50%;
}

</style>
